<template>
    <ScrollEl 
        class="log-container">
        <div class="content-container">
            <el-form 
                :model="queryParams" 
                ref="queryForm" 
                :inline="true">
                <el-form-item label="查询人">
                    <el-input
                        v-model="queryParams.keygenUsername"
                        placeholder="请输入查询人"
                        clearable
                        
                        style="width: 240px"
                        @keyup.enter.native="getDataList"/>
                </el-form-item>
                <el-form-item label="ip">
                    <el-input
                        v-model="queryParams.queryIp"
                        placeholder="请输入ip地址"
                        clearable
                        
                        style="width: 240px"
                        @keyup.enter.native="getDataList"/>
                </el-form-item>
                <el-form-item label="查询时间">
                    <el-date-picker
                        v-model="other.t"
                        
                        style="width: 240px"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        type="datetimerange"
                        range-separator="-"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button 
                        type="primary" icon="el-icon-search"  
                        @click="getDataList"
                        style="background: #1E36D4;border-color:#1E36D4;">
                        搜索
                    </el-button>
                </el-form-item>
            </el-form>
            <el-table 
                v-loading="loading"
                :data="dataList">
                <el-table-column
                    type="index"
                    :index="index => index + 1 + (pageParams.page - 1) * pageParams.size"
                    width="70"
                    label="序号"/>
                <el-table-column
                    label="动作"
                    prop="action"
                    :show-overflow-tooltip="true"
                    min-width="160"/>
                <el-table-column
                    label="模块"
                    prop="modeName"
                    :show-overflow-tooltip="true"
                    min-width="160"/>
                <el-table-column label="ip地址" prop="ipaddress" width="140" />
                <el-table-column label="操作时间" prop="selDate" width="160" />
                <el-table-column label="操作人" prop="selMan" width="160" />
            </el-table>
            <el-pagination
                background
                style="text-align: right"
                @current-change="page=>{
                    pageParams.page = page;
                }"
                @size-change="size=>{
                    pageParams.size = size;
                }"
                :current-page="pageParams.page"
                :page-sizes="[10, 20, 50]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageParams.totalSize"
                :page-count="pageParams.size">
            </el-pagination>
        </div>
    </ScrollEl>
</template>
<script>
/*
 日志管理
 */
import ScrollEl from "@/components/ScrollEl";
export default {
    name:'Log',
    components:{ScrollEl},
    data() {
        return {
            loading: false,
            queryParams: {},
            pageParams: {
                page: 1,
                size: 15,
                totalSize: 0,
            },
            other: {},
            dataList: [],
        };
    },
    mounted() {
        this.getDataList();
    },
    methods: {
        formatParamOther(other) {  //格式化参数other
            if (!other) return;
            if (typeof other !== 'object') return;
            if (Object.keys(other) == 0) return;
            let _other = {};
            for(let key in other){
                if (other[key] instanceof Array) {
                    _other[key] = other[key].join(",");
                } else {
                    _other[key] = other[key];
                }
            }
            return _other;
        },
        getDataList() {
            let other = this.formatParamOther(this.other);
            let queryParams = {
                ...this.queryParams, 
                pageNum: this.pageParams.page,
                pageSize: this.pageParams.size,
                ...(other?{other:other}:false),
            };
            this.loading = true;
            this.$Service
                .post(
                    this.$Api.log,
                    queryParams,
                ).then(data => {
                    data = data.data;
                    this.dataList = data.data;
                    this.pageParams.page = data.pageNum;
                    this.pageParams.size = data.pageSize;
                    this.pageParams.totalSize = data.count;
                })
                .finally(() => {
                    this.loading = false;
                });
        },
    },
};
</script>
<style lang="scss" scoped>
.log-container {
    width: 100%;
    height: fit-content;
    max-height: 100%;
    box-sizing: border-box;
    /deep/input,.el-date-editor,.el-range-input{
        background-color: rgba(255, 255, 255, 0.38);
        border-color: rgba(255, 255, 255, 0.38);
        color: white;
    }
    /deep/.el-range-input{
        background-color: #00000000;
    }
    >.content-container{
        padding: 3rem;
        border-radius: 8px;
        border: 2px solid var(--border-color-2);
        background: linear-gradient(180deg, #031F37 0%, #03316C 100%);
        box-shadow: inset 0px 0px 15px #1b60cc;
        /deep/.el-form{
            .el-form-item__label{
                color:var(--font-color);
            }
        }
        .el-pagination {
            margin-top: 30px;
        }
        /deep/.el-table{
            background-color: #00000000;
            margin-top: 2rem;
            border-radius: 7px;
            border: 1px solid var(--border-color-2);
            &::before {
                display: none;
            }
            .el-loading-mask{
                background-color: rgba(0, 0, 0, 0.508);
            }
            tr{
                background-color: #00000000;
                &:hover{
                    td{
                        background-color: #00000072 !important;
                    }
                }
            }
            .hover-row{
                background-color: #1E36D4;
            }
            th{
                background-color: #00000072;
                color: #c2c2c2;
                border-color: var(--border-color-2) !important;
            }
            td{
                border-color: var(--border-color-2) !important;
                color: var(--font-color);
            }
            .el-table__fixed-right{
                background-color: rgb(32, 44, 55) !important;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.651);
                &::before{
                    display: none;
                }
            }
            .el-table__cell{
                background-color: #04040400;
            }
        }
    }
}
</style>
